<template>
  <div class="statictop">
    <a-row :gutter="[20, 10]">
      <a-col :span="computedSpan">
        <div class="name" :class="{ tip: props.title == '总览' }">
          {{ props.title }}
          <span v-if="props.data" class="data-fresh">{{ props.data }}</span>
        </div>
      </a-col>
      <a-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
        <a-select popup-container=".statictop" v-if="showTime" v-model="timeId" @change="changeTime">
          <a-option v-for="item in timeList" :key="item.label" :value="item.value" :label="item.label" />
        </a-select>
      </a-col>
      <a-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3" v-if="showChannel">
        <a-select popup-container=".statictop" v-model="channelType" @change="changeChannel" placeholder="全部渠道" allow-clear>
          <a-option v-for="item in channelList" :key="item.label" :value="item.value" :label="item.label" />
        </a-select>
      </a-col>
      <a-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
        <div class="flex">
          <remote-select
            v-if="props.title == '总览'"
            popup-container=".statictop"
            v-model="siteId"
            placeholder="全部机构"
            :params="{ type: 2 }"
            type="org_selectAuthListByOrgNameLike"
            @change="changeFn"
            lazyloading
          />
          <remote-select
            v-else
            popup-container=".statictop"
            v-model="siteId"
            placeholder="全部门店"
            :params="{ oldId: siteId }"
            type="site_listBystaff"
            @change="changeFn"
            lazyloading
          />
          <a-tooltip content="所属机构权限下的门店">
            <icon-question-circle class="svgtooltip" />
          </a-tooltip>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup name="statictop">
  import { computed, ref } from 'vue'
  const emits = defineEmits(['onchange', 'onchangeTime', 'onChangeChannel'])
  const props = defineProps({
    title: String,
    data: String, //tooltip
    type: String, //哪个门店下拉框
    storeList: {
      type: Array,
      default: () => [],
    },
    timeList: {
      type: Array,
      default: () => [],
    },
    channelList: {
      type: Array,
      default: () => [
        {
          label: '飞猪',
          value: -1,
        },
        {
          label: '自营',
          value: 0,
        },
        {
          label: '携程',
          value: 1,
        },
        {
          label: '悟空',
          value: 2,
        },
        {
          label: '哈啰',
          value: 3,
        },
        {
          label: '铁行',
          value: -3,
        },
        {
          label: '滴滴',
          value: -2,
        },
        {
          label: '飞租',
          value: -4,
        },
        {
          label: '其他',
          value: 99,
        },
      ],
    },
    showTime: {
      type: Boolean,
      default: false,
    },
    showChannel: {
      type: Boolean,
      default: false,
    },
    timeValue: {
      type: Number,
      default: 2,
    },
  })
  const siteId = ref('')
  const channelType = ref('')
  const timeId = ref(props.timeValue)

  const computedSpan = computed(() => {
    if (props.showChannel) {
      return 14
    } else {
      return 17
    }
  })

  const changeTime = (val) => {
    const value = val ? val : ''
    const timeName = props.timeList.filter((item) => item.value == value)
    // siteId.value = val
    emits('onchangeTime', props.type, value, timeName[0].label)
  }
  // 更换门店
  const changeFn = (val, name) => {
    const value = val ? val : ''
    emits('onchange', props.type, value, name?.siteName)
  }
  // 更换渠道
  const changeChannel = (val) => {
    const value = val ?? ''
    emits('onChangeChannel', props.type, value)
  }
</script>

<style lang="less" scoped>
  .statictop {
    position: relative;
    margin-bottom: 16px;
  }
  .name {
    font-size: 16px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #1e1e1e;
    line-height: 22px;
  }
  .tip {
    padding-left: 10px;
    &:before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 18px;
      background: #1890ff;
      position: absolute;
      top: 6px;
      left: 0;
    }
  }
  .flex {
    display: flex;
  }
  .svgtooltip {
    margin: 7px 0 0 4px;
    height: 16px;
    width: 16px;
    color: #4e5969;
    flex-shrink: 0;
  }
  .data-fresh {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #86909c;
    line-height: 22px;
  }
  :deep(.arco-select-view-single) {
    background: #fff !important;
    border: 1px solid #c5c6cd;
    border-radius: 2px;
  }
</style>
